<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ taglib prefix="s" uri="/struts-tags"%>
       <%@ page import="com.bie.action.*"%>
   <%@ page import="com.woke.dao.*"%>
      <%@ page import="com.woke.bean.*"%>
      <%@ page import="java.util.*"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="cjjs/jquery.min.js"></script>
    <script src="cjjs/turntable.js"></script>
    <title>沃客营销活动抽奖</title>
    <style>
    	.body{
    		background-image: url(../images/backimg.jpg)
    	}
    
        .lottery {
            position: relative;
            display: inline-block;
        }

        .lottery img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -76px;
            margin-top: -82px;
            cursor: pointer;
        }

        #message {
            position: absolute;
            top: 0px;
            left: 10%;
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            .lottery img{
                display: none;
            }   
        </style>
    <![endif]-->
</head>

<body>
    <div class="lottery" style="text-align: center;margin-left: 600px">
        <canvas id="myCanvas" width="800px" height="800px" style="border:0px solid #d3d3d3;">
        </canvas>
        <p id="message" style="font-size: 25px;color: red"></p>
        <img src="http://www.17sucai.com/preview/945243/2018-03-16/luckdraw/images/start.png" id="start">
    </div>

    <script>
    
        var wheelSurf
        // 初始化装盘数据 正常情况下应该由后台返回
        
        var initData = {
            "success": true,
            "list": [
            	
            	 <%
           		int pageSize = 15;//4个一分
         		int currentPage = 1;//开始
         		request.setCharacterEncoding("UTF-8");
         		String cp = request.getParameter("page");
         		String sw = " 1=1 ";
         		CjPrize dao = new CjPrize();
         		
         		
         		int qqsum =dao.selectLendSize();
         		int qq =qqsum/15;
         		if(qqsum%15!=0){
         		qq=qq+1;
         		}else{
         			qq=qqsum/15;
         		}
         		
         		
         		if (cp != null ) {
         			currentPage = Integer.parseInt(cp);
         			int acp=Integer.parseInt(cp);
         			if(acp>qq){
         				currentPage=qq;
         			}
         			if(acp<1){
         				currentPage=1;
         			}
         		}

         		
         	  List<CjPrize> list = dao.selectLend(currentPage, pageSize);

         		int dddd =currentPage;
         		int ff =dddd++;
         		int dd =dddd--;

         			if (list != null && list.size() > 0) {
         				for (int i = 0; i < list.size(); i++) {
         					CjPrize s = list.get(i);
         		
               %>
            	
            	{
                    "id": <%=s.getId()%>,
                    "name": "<%=s.getPrizename()%>",
                    "image": "",
                    "rank":<%=s.getRank()%>,
                    "percent":<%=s.getProbability()%>
                },
                
                <%}} 	
					%>
            ]
        }
      
      
        // 计算分配获奖概率(前提所有奖品概率相加100%)
        function getGift(){
            var percent = Math.random()*100
            var totalPercent = 0
            for(var i = 0 ,l = initData.list.length;i<l;i++){
                totalPercent += initData.list[i].percent
                if(percent<=totalPercent){
                    return initData.list[i]
                }
            }           
        }

        var list = {}
        
        var angel = 360 / initData.list.length
        // 格式化成插件需要的奖品列表格式
        for (var i = 0, l = initData.list.length; i < l; i++) {
            list[initData.list[i].rank] = {
                id:initData.list[i].id,
                name: initData.list[i].name,
                image: initData.list[i].image
            }
        }
        // 查看奖品列表格式
        
        // 定义转盘奖品
        wheelSurf = $('#myCanvas').WheelSurf({
            list: list, // 奖品 列表，(必填)
            outerCircle: {
                color: '#df1e15' // 外圈颜色(可选)
            },
            innerCircle: {
                color: '#f4ad26' // 里圈颜色(可选)
            },
            dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
            disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
            title: {
                color: '#5c1e08',
                font: '19px Arial'
            } // 奖品标题样式(可选)
        })

        // 初始化转盘
        wheelSurf.init()
        // 抽奖
        var throttle = true;
        $("#start").on('click', function () {

            var winData = getGift() // 正常情况下获奖信息应该由后台返回

            $("#message").html('')
            if(!throttle){
                return false;
            }
            throttle = false;
            var count = 0
            // 计算奖品角度

            for (const key in list) {
                if (list.hasOwnProperty(key)) {                    
                    if (winData.id == list[key].id) {
                        break;
                    }
                    count++    
                }
            }
      
            // 转盘抽奖，
            wheelSurf.lottery((count * angel + angel / 2), function () {
                $("#message").html(winData.name)
                throttle = true;
            })
        })

        
    </script>
</body>

</html>